<template>
  <div class="singer-detail">
    <div class="nav-header">
      <div class="back-button" @click="goBack">
        <img src="@/assets/icon/返回.png" alt="返回">
      </div>
      <!-- <div class="title">{{ singer?.singer_name || '歌手详情' }}</div> -->
      <div class="right-space"></div>
    </div>
    
    <div v-if="loading" class="loading">
      <div class="loading-spinner"></div>
    </div>
    
    <div v-else-if="singer" class="singer-info">
      <div class="singer-header">
        <div class="singer-avatar">
          <img :src="singer.singer_pic" :alt="singer.singer_name">
        </div>
        <!-- <div class="singer-name">{{ singer.singer_name }}</div> -->
      </div>
      
      <div class="songs-section">
        <div class="section-title">热门歌曲</div>
        
        <div v-if="loadingSongs" class="loading-songs">
          <div class="loading-spinner"></div>
        </div>
        
        <div v-else-if="songs.length > 0" class="song-list">
          <div 
            v-for="(song, index) in songs" 
            :key="song.mid" 
            class="song-item"
            @click="playSong(song)"
          >
            <div class="song-index">{{ index + 1 }}</div>
            <div class="song-info">
              <div class="song-name">{{ song.name }}</div>
              <div class="song-artist">{{ getSingerNames(song.singer) }}</div>
            </div>
            <div class="song-play">
              <!-- 修改播放图标，根据当前播放状态显示不同图标 -->
              <img 
                v-if="isCurrentPlaying(song)" 
                src="@/assets/icon/更多.png" 
                alt="暂停"
              >
              <img 
                v-else 
                src="@/assets/icon/更多.png" 
                alt="播放"
              >
            </div>
          </div>
        </div>
        
        <div v-else class="empty-songs">
          暂无歌曲数据
        </div>
      </div>
    </div>
    
    <div v-else class="error-message">
      无法获取歌手信息
    </div>
  </div>
</template>

<script setup>
import { ref, onMounted, computed } from 'vue';
import { useRoute, useRouter } from 'vue-router';
import { usePlayerStore } from '@/store';
import { musicApi } from '@/api/music';
import axios from 'axios';

const route = useRoute();
const router = useRouter();
const playerStore = usePlayerStore();

const singer = ref(null);
const songs = ref([]);
const loading = ref(true);
const loadingSongs = ref(false);

// 获取传递过来的歌手信息
const singerId = route.query.id;
const singerName = route.query.name || '未知歌手';

// 获取歌手详情和歌曲
const fetchSingerDetail = async () => {
  if (!singerId) {
    loading.value = false;
    return;
  }
  
  try {
    loading.value = true;
    
    // 设置歌手基本信息
    singer.value = {
      singer_name: singerName, // 使用传入的歌手名称或默认值
      singer_pic: `https://y.qq.com/music/photo_new/T001R300x300M000${singerId}.jpg`,
      singer_mid: singerId
    };
    
    // 获取歌手歌曲
    loadingSongs.value = true;
    const response = await musicApi.getSingerDetail(singerId);
    
    if (response.data && response.data.result === 100) {
      songs.value = response.data.data.list || [];
    } else {
      console.error('获取歌手歌曲失败:', response.data);
    }
  } catch (error) {
    console.error('获取歌手详情错误:', error);
  } finally {
    loading.value = false;
    loadingSongs.value = false;
  }
};

// 播放歌曲
const playSong = async (song) => {
  try {
    // 检查是否是当前正在播放的歌曲
    if (playerStore.currentSong && playerStore.currentSong.songmid === (song.mid || song.songmid)) {
      // 如果是同一首歌，则切换播放状态
      playerStore.togglePlay();
      return;
    }
    
    // 转换歌曲格式以适应播放器
    const formattedSong = {
      songmid: song.mid || song.songmid,
      songname: song.name || song.songname,
      singer: song.singer,
      albummid: song.album?.mid || song.albummid || '',
      albumname: song.album?.name || song.albumname || ''
    };
    
    // 使用 store 中的方法播放歌曲
    await playerStore.playSong(formattedSong);
    
  } catch (error) {
    console.error('播放歌曲失败:', error);
  }
};

// 获取歌手名称列表
const getSingerNames = (singers) => {
  if (!singers || !Array.isArray(singers)) return '未知歌手';
  return singers.map(s => s.name).join(' / ');
};

// 返回上一页
const goBack = () => {
  router.back();
};

onMounted(() => {
  fetchSingerDetail();
});

// 添加判断当前歌曲是否正在播放的方法
const isCurrentPlaying = (song) => {
  return playerStore.isPlaying && 
         playerStore.currentSong && 
         playerStore.currentSong.songmid === (song.mid || song.songmid);
};
</script>

<style lang="scss" scoped>
.singer-detail {
  padding: 15px;
  
  .nav-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 20px;
    
    .back-button {
      width: 30px;
      height: 30px;
      display: flex;
      align-items: center;
      justify-content: center;
      cursor: pointer;
      
      img {
        width: 20px;
        height: 20px;
      }
    }
    
    .title {
      font-size: 18px;
      font-weight: 600;
      color: #333;
    }
    
    .right-space {
      width: 30px;
    }
  }
  
  .loading, .loading-albums, .loading-songs {
    display: flex;
    justify-content: center;
    padding: 20px 0;
    
    .loading-spinner {
      width: 30px;
      height: 30px;
      border: 3px solid rgba(0, 0, 0, 0.1);
      border-radius: 50%;
      border-top-color: #31c27c;
      animation: spin 1s ease-in-out infinite;
    }
    
    @keyframes spin {
      to { transform: rotate(360deg); }
    }
  }
  
  .singer-info {
    .singer-header {
      display: flex;
      flex-direction: column;
      align-items: center;
      margin-bottom: 30px;
      
      .singer-avatar {
        width: 120px;
        height: 120px;
        border-radius: 50%;
        overflow: hidden;
        margin-bottom: 15px;
        box-shadow: 0 4px 15px rgba(0, 0, 0, 0.15);
        
        img {
          width: 100%;
          height: 100%;
          object-fit: cover;
        }
      }
      
      .singer-name {
        font-size: 22px;
        font-weight: 600;
        color: #333;
      }
    }
    
    .section-title {
      font-size: 18px;
      font-weight: 600;
      margin-bottom: 15px;
      color: #333;
    }
    
    .albums-section, .songs-section {
      margin-bottom: 30px;
    }
    
    .album-list {
      .album-item {
        display: flex;
        align-items: center;
        padding: 10px 0;
        border-bottom: 1px solid #f0f0f0;
        cursor: pointer;
        
        &:hover {
          background-color: #f9f9f9;
        }
        
        .album-cover {
          width: 60px;
          height: 60px;
          border-radius: 6px;
          overflow: hidden;
          margin-right: 15px;
          
          img {
            width: 100%;
            height: 100%;
            object-fit: cover;
          }
        }
        
        .album-info {
          flex: 1;
          
          .album-name {
            font-size: 16px;
            font-weight: 500;
            color: #333;
            margin-bottom: 5px;
          }
          
          .album-time {
            font-size: 12px;
            color: #999;
          }
        }
      }
    }
    
    .song-list {
      .song-item {
        display: flex;
        align-items: center;
        padding: 12px 0;
        border-bottom: 1px solid #f0f0f0;
        cursor: pointer;
        
        &:hover {
          background-color: #f9f9f9;
        }
        
        .song-index {
          width: 30px;
          text-align: center;
          font-size: 14px;
          color: #999;
        }
        
        .song-info {
          flex: 1;
          padding: 0 10px;
          
          .song-name {
            font-size: 16px;
            color: #333;
            margin-bottom: 4px;
          }
          
          .song-artist {
            font-size: 12px;
            color: #999;
          }
        }
        
        .song-play {
          width: 30px;
          height: 30px;
          display: flex;
          align-items: center;
          justify-content: center;
          
          img {
            width: 20px;
            height: 20px;
            opacity: 0.7;
            transition: opacity 0.2s ease;
          }
          
          &:hover img {
            opacity: 1;
          }
        }
      }
    }
    
    .empty-albums, .empty-songs {
      text-align: center;
      color: #999;
      padding: 20px 0;
    }
  }
  
  .error-message {
    text-align: center;
    color: #999;
    padding: 40px 0;
  }
}
</style>